<!-- eslint-disable vue/multi-word-component-names -->
<!--
 * @Author: aliyun3129073295 1718324422@qq.com
 * @Date: 2022-10-24 09:50:09
 * @LastEditors: zhuxin xu
 * @LastEditTime: 2023-01-29 11:02:28
 * @FilePath: \xu_vue\src\view\Login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main">
    <div class="left">
      <p class="logo">
        <img src="../../assets/pic/login/logo@3x.png" alt />
      </p>
      <div class="title">欢迎登录</div>
      <div class="desc">欢迎来到E发单后台管理系统</div>
      <div class="from">
        <el-form>
          <el-form-item class="lableone" label="账号">
            <el-input clearable v-model="formLabelAlign.use" placeholder="输入账号"></el-input>
          </el-form-item>
          <el-form-item class="labletwo" label="密码">
            <el-input clearable v-model="formLabelAlign.psd" placeholder="输入密码"></el-input>
          </el-form-item>
          <el-button @click="login">确认</el-button>
        </el-form>
      </div>
      <div class="message"></div>
    </div>
    <div class="right">
      <div class="pic">
        <img src="../../assets/pic/login/编组 2@3x.png" alt />
      </div>
      <div class="pic1">
        <img src="../../assets/pic/login/编组 26备份@3x.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loginPage",
  data() {
    return {
      formLabelAlign: {
        use: "",
        psd: ""
      }
    };
  },
  methods: {
    goEOrder() {
      this.$router.push("/");
    },
    login() {
      let params = {
        grant_type: "password",
        client_secret: "123456",
        username: 18226146136,
        password: "123456",
        client_id: "client_web",
        auth_type: "password"
      };
      this.$api.login(params).then(res => {
        console.log(res);
      });
    }
  }
};
</script>

<style  scoped>
.main {
  display: flex;
  height: 100%;
}
.right {
  width: 840px;
  height: 1080px;
  /* background-color: rgb(80, 22, 22); */
  background-image: linear-gradient(180deg, #e6f4f5 0%, #e9f5f7 100%);
}
.left {
  flex: 1;
}
.logo {
  margin-top: 100px;
  margin-left: 60px;
}
.logo img {
  width: 167px;
}
.title {
  font-family: Gellix-SemiBold;
  font-size: 39px;
  color: #000000;
  letter-spacing: 0;
  line-height: 48px;
  font-weight: 600;
  margin-left: 205px;
  margin-top: 220px;
}
.desc {
  font-family: PingFangSC-Regular;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: 0;
  text-align: left;
  line-height: 24px;
  font-weight: 400;
  margin-left: 205px;
  margin-top: 16px;
}
::v-deep(.el-form-item__label) {
  float: none;
  display: block;
  text-align: left;
}
.lableone,
.labletwo {
  font-family: PingFangSC-Regular;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 205px;
  margin-top: 48px;
  margin-bottom: 16px;
}
::v-deep(.el-input__inner) {
  background: rgba(0, 0, 0, 0);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  width: 430px;
  height: 56px;
  font-family: AvenirNext-Regular;
  font-size: 18px;
  color: #000000;
  letter-spacing: -0.3px;
  line-height: 28px;
  font-weight: 400;
}
::v-deep(.el-input__inner:hover) {
  border: 1px solid #04a5ab;
}
.labletwo {
  margin-top: 24px;
}
::v-deep(.el-input) {
  width: 430px;
  height: 56px;
}
::v-deep(.el-input__icon) {
  font-size: 18px;
}
::v-deep(.el-button) {
  width: 430px;
  height: 56px;
  background: #04a5ab;
  border: 0 solid #04a5ab;
  border-radius: 8px;
  margin-left: 205px;
  margin-top: 48px;
  font-family: AvenirNext-Medium;
  font-size: 17px;
  color: #ffffff;
  letter-spacing: -0.3px;
  text-align: center;
  line-height: 28px;
  font-weight: 500;
}
.pic {
  margin-left: 120px;
  margin-top: 151px;
}
.pic img {
  width: 419px;
}
.pic1 {
  margin-left: 143px;
  margin-top: 101px;
}
.pic1 img {
  width: 601px;
}
</style>